<template>
	<section>
		<basic-drawer
			:loading="loading"
			:visible="visible"
			:footer="false"
			@ok="handleConfirm"
			@cancel="handleCancel"
			@open="handleOpen"
			@close="handleClose"
		>
			<div class="drawer-menu">
				<div class="drawer-menu_btn">
					<a-button shape="round" text class="overflow-hidden text-primary bg-[#2B2B2D] bg-opacity-5" @click="handleLogin"
						>Log in</a-button
					>
					<a-button type="primary" class="overflow-hidden" shape="round">Sign up</a-button>
				</div>
				<mobile-title title="All Products" />
				<div class="drawer-menu_product">
					<a-link v-for="item in products" :key="item.label" class="drawer-menu_product_item" :to="localePath(item.route)">
						<basic-icon :name="item.icon" size="20px"></basic-icon>
						<div class="text-[16px] leading-[20px] font-semibold flex-1 whitespace-nowrap">
							{{ item.label }}
						</div>
						<icon-right />
					</a-link>
				</div>
				<mobile-title title="Language and Currency" />
				<div class="drawer-menu_product">
					<a-link v-for="item in languages" :key="item.label" class="drawer-menu_product_item" :to="localePath(item.route)">
						<basic-icon :name="item.icon" size="20px"></basic-icon>
						<div class="text-[16px] leading-[24px] font-semibold flex-1 whitespace-nowrap">
							{{ item.label }}
						</div>
						<icon-right />
					</a-link>
				</div>
			</div>
		</basic-drawer>
		<basic-modal v-model:visible="loginVisible">123123</basic-modal>
	</section>
</template>

<script setup lang="ts">
interface IProps {
	visible: boolean;
	loading: boolean;
}
interface IEmit {
	(event: "update:visible", value: boolean): void;
	(event: "update:loading", value: boolean): void;
}
withDefaults(defineProps<IProps>(), {
	visible: false,
	loading: false
});
const loginVisible = ref(false);
const emit = defineEmits<IEmit>();
const localePath = useLocalePath();
// const { clientWidth } = useClientAttrs();
// const width = computed(() => {
// 	if (clientWidth.value <= 720) return "100%";
// 	return 720;
// });
const products = reactive([
	{
		label: "Domains",
		icon: "internet",
		route: "/"
	},
	{
		label: "Hosting",
		icon: "internet",
		route: ""
	},
	{
		label: "Email",
		icon: "internet",
		route: ""
	},
	{
		label: "Security",
		icon: "internet",
		route: ""
	},
	{
		label: "Transfer to Us",
		icon: "internet",
		route: ""
	},
	{
		label: "About Us",
		icon: "internet",
		route: "/about"
	}
]);
const languages = reactive([
	{
		label: "English - US",
		icon: "internet",
		route: ""
	},
	{
		label: "US Dollar $",
		icon: "internet",
		route: ""
	}
]);
const handleLogin = () => (loginVisible.value = true);
// 打开弹窗
const handleOpen = () => {};
// 弹窗关闭
const handleClose = () => emit("update:visible", false);
// 弹窗确认
const handleConfirm = () => {
	// formEl.value?.validate().then(() => {
	// 	emit("update:loading", true);
	// 	emit("update:visible", false);
	// 	update_pwd({
	// 		...state.value
	// 	})
	// 		.then(() => {
	// 			ToastUtils.success("修改成功");
	// 			handleClose();
	// 			emit("update:visible", false);
	// 		})
	// 		.finally(() => emit("update:loading", false));
	// });
};
const handleCancel = () => {
	emit("update:visible", false);
};
</script>

<style lang="less" scoped>
.drawer-menu {
	@apply w-full h-full;
	&_btn {
		@apply flex items-center w-full justify-between gap-x-4 p-16px;
		height: 5.1rem;
		background: url("@/assets/svgIcons/login-btn-bg.svg") no-repeat bottom right;
		background-size: 100% auto;

		:deep(.arco-btn) {
			@apply h-full flex-1 text-16px font-semibold w-1/2 rounded-full;
		}
	}

	&_product {
		&_item {
			@apply flex items-center gap-x-16px pl-12px pr-32px h-48px flex-nowrap text-2;
		}
	}
}
</style>
